import MVT from '../src/ol/format/MVT.js';
import Map from '../src/ol/Map.js';
import TileGrid from '../src/ol/tilegrid/TileGrid.js';
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import View from '../src/ol/View.js';
import {Fill, Icon, Stroke, Style, Text,Circle} from '../src/ol/style.js';
import {get as getProjection} from '../src/ol/proj.js';
import TileLayer from '../src/ol/layer/Tile.js';
import ImageTile from '../src/ol/source/ImageTile.js';
import {TileDebug} from '../src/ol/source.js';
const key =
  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';

// Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
const resolutions = [];
for (let i = 0; i <= 8; ++i) {
  resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
}
// Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
function tileUrlFunction(tileCoord) {
  return (
    'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
    '{z}/{x}/{y}.vector.pbf?access_token=' +
    key
  )
    .replace('{z}', String(tileCoord[0] * 2 - 1))
    .replace('{x}', String(tileCoord[1]))
    .replace('{y}', String(tileCoord[2]))
    .replace(
      '{a-d}',
      'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1),
    );
}
const radiusss = {};
const map = new Map({
  layers: [
    new TileLayer({
      source: new ImageTile({
        attributions:
          'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
          'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
        url:
          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
      }),
    }),
    new TileLayer({
      source: new TileDebug(),
    }),
    new VectorTileLayer({
      source: new VectorTileSource({
        attributions:'OpenStreetMap contributors</a>',
        format: new MVT(),
        tileGrid: new TileGrid({
          extent: getProjection('EPSG:3857').getExtent(),
          resolutions: resolutions,
          tileSize: 512,
        }),
        tileUrlFunction: function(tileCoord,...args){
          return 'https://a.tiles.mapbox.com/v4/mapbox.04w69w5j/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoibGlud2VpOTIxMjE5IiwiYSI6ImNrb2pwbnM5dTFpZ3UybnB3dHlnc2M3dGsifQ.XbmGjeu_6Fr9qByZQxsvkQ'
          .replace('{z}', String(tileCoord[0] * 2 - 1))
          .replace('{x}', String(tileCoord[1]))
          .replace('{y}', String(tileCoord[2]))
        },
      }),
      style: function(feature){
        const id = feature.id_;
        if(!radiusss[id]){
          radiusss[id] = 0;
        }
        radiusss[id]++
        if(radiusss[id] === 0){
          return new Style({
            image: new Circle({
              radius: 3, // 圆的半径
              fill: new Fill({
                color: "rgba(255,0,0,0.5)" // 点的填充颜色
              }),
              stroke: new Stroke({
                color: 'black', // 点的边框颜色
                width: 1 // 边框宽度
              })
            })
          })
        }else{
          return new Style({
            image: new Circle({
              radius: 8, // 圆的半径
              fill: new Fill({
                color: "rgba(255,255,0,0.5)" // 点的填充颜色
              }),
              stroke: new Stroke({
                color: 'black', // 点的边框颜色
                width: 1 // 边框宽度
              })
            })
          })
        }
      
      }
    }),
  ],
  target: 'map',
  view: new View({
    // center: [0, 0],
    center: [
      13321445.289540518,
      2990522.2946292353
  ],
    minZoom: 1,
    zoom: 8,
  }),
});
